<template>
  <div class="dashboard-container">
   <el-row :gutter="10">
      <el-col :span="6">
        <div class="statistics" style="background: #409eff">
          <div class="titles" @click="editDialogVisible = true">
            <p>应收保证金</p>
            <el-tag size="mini" type="success">实时</el-tag>
          </div>
          <div class="num">{{ num1 }}</div>
          <div class="tip">当前应收保证金(元)</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #e6a23c">
          <div class="titles" @click="editDialogVisible = true">
            <p>实收保证金</p>
            <el-tag size="mini" type="info">实时</el-tag>
          </div>
          <div class="num">{{ num2 }}</div>
          <div class="tip">当前实收保证金(元)</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #67c23a">
          <div class="titles" @click="editDialogVisible = true">
            <p>应收服务费</p>
            <el-tag size="mini" type="warning">实时</el-tag>
          </div>
          <div class="num">{{ num3 }}</div>
          <div class="tip">当前应收服务费(元)</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics" style="background: #909399">
          <div class="titles" @click="editDialogVisible = true">
            <p>实收服务费</p>
            <el-tag size="mini" type="primary">实时</el-tag>
          </div>
          <div class="num">{{ num4 }}</div>
          <div class="tip">当前实收服务费(元)</div>
        </div>
      </el-col>
    </el-row>

    <!-- 数据可视化 -->
    <div class="echarts-container">
      <el-card id="chart1"></el-card>
      <el-card id="chart2"></el-card>
    </div>

    <!-- 模态框 -->
    <el-dialog title="数据查询" :visible.sync="editDialogVisible" width="60%">
      <el-row>
        <el-col :span="8" style="margin-top:5px;">
            <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期"></el-date-picker>
        </el-col>
        <el-col :span="8">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="公司名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8" style="margin-top:6px;">
            <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData2" style="width: 100%" border>
        <el-table-column label="序号" width="180" type="index"></el-table-column>
        <el-table-column prop="company_name" label="参投单位" width="200"> </el-table-column>
        <el-table-column prop="offer" label="最终报价(万元)/最终折扣" width="180"> </el-table-column>
        <el-table-column prop="winning" label="中标金额(万元)"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
   data() {
    return {
      num1: 4000,
      num2: 4000,
      num3: 356.728,
      num4: 40000.0,
      num: 0,
      editDialogVisible: false,
      tableData2: [
        {
          company_name: '江西固德实业有限公司',
          offer: 346.368,
          winning: '/',
          server: '/',
          children: [
            {
              id: 0,
              dates: '2021-8-6',
              amount: 40000.0,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '江西固德实业有限公司',
              contacts: '李俊云',
              phone: 13606066961,
              award: '',
              letter: '',
              employer: '',
              acceptance: '',
              address: '',
              remarks: '',
            },
          ],
        },
        {
          company_name: '青岛祥明电力设备有限公司',
          offer: 366.628,
          winning: 366.628,
          server: 34692.064,
          ensure: 4000,
          price: 4000,
          children: [
            {
              dates: '2021-8-6',
              amount: 6406.93699999999,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '青岛祥明电力设备有限公司',
              contacts: '刘朋善',
              phone: 13360862688,
              award: '',
              letter: '',
              employer: '已邮寄或收到',
              acceptance: '已邮寄或收到',
              address: '',
              remarks: '',
            },
          ],
        },
        {
          company_name: '中电建成都铁塔有限公司司',
          offer: 342.3863,
          winning: '/',
          server: '/',
          ensure: 4000,
          price: 4000,
          children: [
            {
              dates: '2021-8-6',
              amount: 40000.0,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '中电建成都铁塔有限公司',
              contacts: '代光杰',
              phone: 13808093424,
              award: '',
              letter: '',
              employer: '',
              acceptance: '',
              address: '',
              remarks: '',
            },
          ],
        },
      ],
      value2: '',
      // 表单输入
      form: {
        name: '',
      },
    }
  },
  mounted() {
    this.drawLine1()
    this.drawLine3()
  },
   methods: {
    change() {
      this.$router.replace('/login')
      this.$message.warning('退出成功')
    },
    drawLine1() {
      // 初始化echarts实例
      // 初始化echarts实例
      let myCharts = this.$echarts.init(document.querySelector('.echarts-container #chart1'))
      var option = {
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          bottom: '0%',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: 'skyblue',
            fontSize: '12',
          },
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '15',
            fontWeight: 'bold',
          },
        },
        series: [
          {
            name: '地区分布',
            type: 'pie',
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            // 图形的文字标签
            label: {
              fontSize: 10,
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 6,
              // length2 链接文字的线条
              length2: 8,
            },
            data: [
              { value: 26, name: '应收保证金（标书规定缴纳金额）(元)' },
              { value: 20, name: '实收保证金(元)' },
              { value: 24, name: '应退还保证金额(元)' },
              { value: 25, name: '预算/拟分包金额（万元）' },
              { value: 20, name: '应收中标服务费(元)' },
              { value: 25, name: '中标金额(万元)' },
              { value: 30, name: '参投单位' },
            ],
          },
        ],
      }

      myCharts.setOption(option)
    },
    drawLine3() {
      // 初始化echarts实例
      let myCharts = this.$echarts.init(document.querySelector('.echarts-container #chart2'))
      var data = {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        ],
      }

      // 2. 指定配置和数据
      var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
          // 通过坐标轴来触发
          trigger: 'axis',
        },
        legend: {
          // 距离容器10%
          right: '10%',
          // 修饰图例文字的颜色
          textStyle: {
            color: '#4c9bfd',
          },
          // 如果series 里面设置了name，此时图例组件的data可以省略
          // data: ["邮件营销", "联盟广告"]
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true,
          borderColor: '#012f4a',
          containLabel: true,
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: 'skyblue',
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: 'skyblue',
          },
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: '#012f4a',
            },
          },
        },
        series: [
          {
            name: '最终报价(万元)/最终折扣',
            type: 'line',
            stack: '总量',
            // 是否让线条圆滑显示
            smooth: true,
            data: data.year[0],
          },
          {
            name: '预算/拟分包金额（万元）',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: data.year[1],
          },
        ],
      }
      // 3. 把配置和数据给实例对象
      myCharts.setOption(option)

      // // 重新把配置好的新数据给实例对象
      // myCharts.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.home {
  background-color: #eaedf1;
}
.el-breadcrumb {
  font-size: 13px !important;
  padding-top: 5px;
}
.content {
  display: flex;
  font-size: 25px;
  justify-content: space-between;
}
.el-row {
  padding: 0 9px;
}
.statistics {
  color: #fff;
  height: 100px;
  border-radius: 4px;
  padding: 0 8px;
}
.titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
p {
  font-size: 13px;
  font-weight: bold;
}
.num {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.tip {
  font-size: 12px;
}
.echarts-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.el-card {
  height: 500px;
  width: 50%;
  margin: 0 8px;
  padding: 20px;
}
</style>
